<!DOCTYPE html>
<html lang="en">
    <head>
  <!-- 元数据 -->
  <meta charset="utf-8">
  <link rel="icon" href="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
  <title>Vue2 tour的使用记录 | 小崔的博客</title>
  <meta name="author" content="cuishikang" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="format-detection" content="telphone=no, email=no" />
  
    <meta name="keywords" content="Vue" />
  
  <meta name="description" content="::: tip 介绍记录Vue tour引导页组件的使用方法:::">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue2 tour的使用记录">
<meta property="og:url" content="https://cuishikang.gitee.io/2022/01/20/Vue/1.2_Vue_Tour/index.html">
<meta property="og:site_name" content="小崔的博客">
<meta property="og:description" content="::: tip 介绍记录Vue tour引导页组件的使用方法:::">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta property="article:published_time" content="2022-01-19T16:00:00.000Z">
<meta property="article:modified_time" content="2022-02-19T10:22:58.539Z">
<meta property="article:author" content="cuishikang">
<meta property="article:tag" content="Vue">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta name="twitter:site" content="@null">
  
  <!-- 站点验证相关 -->
  
    
    
    
  
  <!-- 样式表文件 -->
  <link rel="stylesheet" id="kratos-css" href="/css/kratosr.min.css" type="text/css" media="all">
  
    <link rel="stylesheet" id="highlight-css" href="/css/highlight/night-eighties.min.css" type="text/css" media="all">
  
  
  <link rel="stylesheet" id="fontawe-css" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" type="text/css" media="all">
  <link rel="stylesheet" id="nprogress-css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" type="text/css" media="all">
  
  
    <link rel="stylesheet" href="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.css">
  
  
    <link rel="stylesheet" href="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
  
  
    <link rel="stylesheet" id="darkmode-css" href="/css/kr-dark.min.css" type="text/css" media="all">
  
  <!-- 不得不预先加载的一些JS文件 -->
  <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
  
    <script src="https://unpkg.com/qrcode_js@1.0.0/qrcode.min.js"></script>
  
  
  <style>
    
      .kratos-cover.kratos-cover-2 {
        background-image: url('/images/banner.webp');
      }
    
    
      @media(min-width:768px) {
        body.custom-background {
          background-image: url('/images/bg.webp');
        }
      }
    
  </style>
  
<meta name="generator" content="Hexo 6.0.0"></head>


    <body class="custom-background">
        <div id="kratos-wrapper">
    <div id="kratos-page">
        <div id="kratos-header">
            <header id="kratos-desktop-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="nav-header">
                        <nav id="kratos-menu-wrap">
                            <ul id="kratos-primary-menu" class="sf-menu">
                                
                                    
                                        <li><a href="/"><i class="fa fa-home"></i>首页</a></li>
                                    
                                
                                    
                                        <li><a href="/archives/"><i class="fa fa-file"></i>档案馆</a></li>
                                    
                                
                                    
                                        <li><a href="/friends/"><i class="fa fa-paw"></i>好伙伴</a></li>
                                    
                                
                                    
                                        <li>
                                            <a><i class="fa fa-link"></i>关于本人</a>
                                            <ul class="sub-menu">
                                                
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang"><i class="fa fa-git"></i>码云</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang/tmp/raw/master/img/2201645358312_.pic.jpg"><i class="fa fa-weixin"></i>微信</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://www.zhihu.com/people/fu-xi-ting-67-17-5"><i class="fa  fa-search"></i>知乎</a></li>
                                                    
                                                
                                                    
                                                        <li><a href="http://cuishikang.gitee.io/my_resume/#/"><i class="fa  fa-file-o"></i>简历</a></li>
                                                    
                                                
                                            </ul>
                                        </li>
                                    
                                
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <header id="kratos-mobile-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="color-logo"><a href="/">小崔的博客</a></div>
                    <div class="nav-toggle">
                        <a class="kratos-nav-toggle js-kratos-nav-toggle">
                            <i></i>
                        </a>
                    </div>
                </div>
            </header>
        </div>
        <div class="kratos-start kratos-hero-2">
            <!-- <div class="kratos-overlay"></div> -->
            <div class="kratos-cover kratos-cover-2 text-center">
                <div class="desc desc2 animate-box">
                    <a href="/">
                        <h2>小崔的博客</h2> <br />
                        <span></span>
                    </a>
                </div>
            </div>
        </div>

        <div id="kratos-blog-post">
            <div class="container">
                <div id="main" class="row">
                    

        

            <section class="col-md-8">

        

            <article>
    <div class="kratos-hentry kratos-post-inner clearfix">
        <header class="kratos-entry-header">
            
                <h1 class="kratos-entry-title text-center">Vue2 tour的使用记录</h1>
            
            
            <ul class="kratos-post-meta text-center">
                <li><i class="fa fa-calendar"></i> 2022-01-20</li>
                <li><i class="fa fa-user"></i> 作者 cuishikang</li>
                <li>
                    <i class="fa fa-edit"></i> 
                    
                    
                        ~10.56K
                    
                    字
                </li>
                
            </ul>
        </header>
        <div class="kratos-post-content">
            <div id="expire-alert" class="alert alert-warning hidden" role="alert">
                本文最后编辑于 <time datetime="1645266178539"></time> 前，其中的内容可能需要更新。
            </div>
            
            <hr />
            <p>::: tip 介绍<br>记录Vue tour引导页组件的使用方法<br><br>:::</p>
<span id="more"></span>

<h2 id="什么是vue-tour"><a href="#什么是vue-tour" class="headerlink" title="什么是vue-tour"></a>什么是vue-tour</h2><ul>
<li><a target="_blank" rel="noopener" href="https://pulsardev.github.io/vue-tour/">vue-tour</a> 是Vue专属的引导页组件 引导页就是会告诉用户这块是什么东东 然后一步一步的完成引导 一般引导页都是通过<code>border</code>来抠出来的 或者使用另一个引导组件(忘了) 那我们既然用Vue开发 正好可以用<a target="_blank" rel="noopener" href="https://pulsardev.github.io/vue-tour/">vue-tour</a> 用到组件 这个组件很强大 支持插槽 支持选中组件等等 非常切合Vue</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220120135003180.png" alt="image-20220120135003180"></p>
<ul>
<li>上面那个是他默认最基础的效果 <a target="_blank" rel="noopener" href="https://pulsardev.github.io/vue-tour/">vue-tour</a> 它本身非常智能 可以自动实现上一步和中途跳出的功能 不过大部分公司不太需要中途跳出的功能</li>
</ul>
<h2 id="举例说明"><a href="#举例说明" class="headerlink" title="举例说明"></a>举例说明</h2><ul>
<li>我们那ui给的设计图来看看</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20220120144114169.png" alt="image-20220120144114169"></p>
<ul>
<li>看到ui给的这么漂亮的图 你肯定会说 你上面那个默认样式是什么垃圾 我们做项目不都得听ui和后端吗 这就体现<a target="_blank" rel="noopener" href="https://pulsardev.github.io/vue-tour/">vue-tour</a> 强大之处了</li>
</ul>
<h2 id="实现步骤"><a href="#实现步骤" class="headerlink" title="实现步骤"></a>实现步骤</h2><ul>
<li>先npm下载一下</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install vue-tour</span><br></pre></td></tr></table></figure>

<blockquote>
<p>第一步 我们先在main.js入口注册一下</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">VueTour</span> <span class="keyword">from</span> <span class="string">&#x27;vue-tour&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">require</span>(<span class="string">&#x27;vue-tour/dist/vue-tour.css&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">VueTour</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">  <span class="attr">render</span>: <span class="function"><span class="params">h</span> =&gt;</span> <span class="title function_">h</span>(<span class="title class_">App</span>)</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>

<blockquote>
<p>第二步 在template里添加其组件 导入引导组件</p>
</blockquote>
<ul>
<li>默认的话 会显示结束引导 如果你不想让他显示结束引导 需要使用自带的插槽去定制并通过插槽去判断步骤(0 开始) </li>
<li>绑定盒子的时候 你可以用<code>id</code>或<code>class</code>还有它自带的<code>data-v-step</code> 都可以进行引导绑定 如果你想绑定你的组件中的某个盒子 需要深度绑定详细看 <a target="_blank" rel="noopener" href="https://github.com/pulsardev/vue-tour/wiki/Features#caveats">这里</a><ul>
<li>我建议你可以整个透明色块<code>  background: transparent;</code> 通过<code>fixed</code>来定位引到后隐藏 甚至都不需要隐藏 使用<code> pointer-events: none;</code>穿透点击都可以</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 引导绑定左侧列表引导块 --&gt;</span><br><span class="line">  &lt;div class=&quot;leftTour&quot; id=&quot;v-step-0&quot;&gt;&lt;/div&gt;</span><br><span class="line">  &lt;!-- 引导绑定右下角登录盒子 --&gt;</span><br><span class="line">  &lt;div class=&quot;rightTour&quot; id=&quot;v-step-1&quot;&gt;&lt;/div&gt;</span><br><span class="line">  &lt;!-- 引导组件 --&gt;</span><br><span class="line">  &lt;v-tour name=&quot;myTour&quot; :steps=&quot;steps&quot; :options=&quot;myOptions&quot; :callbacks=&quot;myCallbacks&quot;&gt;</span><br><span class="line">    &lt;!-- 使用插槽 --&gt;</span><br><span class="line">    &lt;template slot-scope=&quot;tour&quot;&gt;</span><br><span class="line">      &lt;transition name=&quot;fade&quot;&gt;</span><br><span class="line">          &lt;!-- 这里的数据绑定不要随意修改 会影响一些默认功能 --&gt;</span><br><span class="line">        &lt;v-step v-if=&quot;tour.steps[tour.currentStep]&quot; :key=&quot;tour.currentStep&quot; :step=&quot;tour.steps[tour.currentStep]&quot; :previous-step=&quot;tour.previousStep&quot; :next-step=&quot;tour.nextStep&quot; :stop=&quot;tour.stop&quot; :skip=&quot;tour.skip&quot; :is-first=&quot;tour.isFirst&quot; :is-last=&quot;tour.isLast&quot; :labels=&quot;tour.labels&quot;&gt;</span><br><span class="line">          &lt;!-- 可以通过 v-if=&quot;tour.currentStep 来判断引导的步骤 设置自己喜欢的样式 --&gt;</span><br><span class="line">          &lt;template v-if=&quot;tour.currentStep === 0&quot;&gt;</span><br><span class="line">            &lt;div slot=&quot;actions&quot;&gt;</span><br><span class="line">              &lt;!-- 这里通过class设置你喜欢的样式和名字 --&gt;</span><br><span class="line">              &lt;!-- nextStep是下一步事件 previousStep是上一步事件 skip是完成事件 通常会用到这些 --&gt;</span><br><span class="line">              &lt;button @click=&quot;tour.nextStep&quot; class=&quot;v-step__button&quot;&gt;我知道了&lt;/button&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">          &lt;/template&gt;</span><br><span class="line">          &lt;template v-if=&quot;tour.currentStep === 1&quot;&gt;</span><br><span class="line">            &lt;div slot=&quot;actions&quot;&gt;</span><br><span class="line">              &lt;button @click=&quot;tour.previousStep&quot; class=&quot;v-step__button v-step__button_first&quot;&gt;上一步&lt;/button&gt;</span><br><span class="line">              &lt;button @click=&quot;tour.nextStep&quot; class=&quot;v-step__button&quot;&gt;我知道了&lt;/button&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">          &lt;/template&gt;</span><br><span class="line">          &lt;template v-if=&quot;tour.currentStep === 2&quot;&gt;</span><br><span class="line">            &lt;div slot=&quot;actions&quot;&gt;</span><br><span class="line">              &lt;button @click=&quot;tour.previousStep&quot; class=&quot;v-step__button v-step__button_first&quot;&gt;上一步&lt;/button&gt;</span><br><span class="line">              &lt;button @click=&quot;tour.nextStep&quot; class=&quot;v-step__button&quot;&gt;我知道了&lt;/button&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">          &lt;/template&gt;</span><br><span class="line">          &lt;template v-if=&quot;tour.currentStep === 3&quot;&gt;</span><br><span class="line">            &lt;div slot=&quot;actions&quot;&gt;</span><br><span class="line">              &lt;button @click=&quot;tour.previousStep&quot; class=&quot;v-step__button v-step__button_first&quot;&gt;上一步&lt;/button&gt;</span><br><span class="line">              &lt;button @click=&quot;tour.nextStep&quot; class=&quot;v-step__button&quot;&gt;我知道了&lt;/button&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">          &lt;/template&gt;</span><br><span class="line">          &lt;template v-if=&quot;tour.currentStep === 4&quot;&gt;</span><br><span class="line">            &lt;div slot=&quot;actions&quot;&gt;</span><br><span class="line">              &lt;button @click=&quot;tour.previousStep&quot; class=&quot;v-step__button v-step__button_first&quot;&gt;上一步&lt;/button&gt;</span><br><span class="line">              &lt;button @click=&quot;tour.skip&quot; class=&quot;v-step__button&quot;&gt;完成引导&lt;/button&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">          &lt;/template&gt;</span><br><span class="line">        &lt;/v-step&gt;</span><br><span class="line">      &lt;/transition&gt;</span><br><span class="line">    &lt;/template&gt;</span><br><span class="line">  &lt;/v-tour&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>第三步 设置一下他的样式 让他和ui设计图一样</p>
</blockquote>
<ul>
<li>首先这个组件默认是没有引导阴影的 你需要单独在当前页面的style中添加一个css 这样就可以实现引导阴影效果 <font color =#ff3040>这个很关键</font> 你不设置这个类 那么他只是一个边框效果</li>
<li><font color =#ff3040>注意: 如果你给组件也要使用引导阴影当前页面 <code>&lt;style&gt;</code> 不要加<code>scope</code> 因为添加后只是当前页面唯一的class类(防止污染) 建议直接在<code>&lt;style&gt;</code>中设置即可 不要在<code>scope</code> 中去写</font></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.v-tour__target--highlighted</span> &#123;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">99999px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.6</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>然后我们通过<code>::v-deep</code> 深度选择器来选中他自带的样式 进行修改 <font color =#ff3040>如果你通过插槽设置的引导样式 就可以不用<code>::v-deep</code>深度选择器</font> 我这里是都使用了深度<ul>
<li>这里讲个小知识 如果你的style使用了<code>scoped</code>(每个vue页面生成随机类名) 那么你想改组件样式 就需要使用<code>::v-deep</code>深度选择器 如果你没有加<code>scoped</code> 直接写的style 则需要注意层级问题 使用多层级 或者<code>!important</code></li>
<li>我们这里使用了<code>scoped</code> 所以需要加<code>::v-deep</code> 深度选择器</li>
</ul>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br></pre></td><td class="code"><pre><span class="line">::v-deep .demoss &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">30px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">28px</span> <span class="number">50px</span> <span class="number">0px</span> <span class="number">50px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">::v-deep .line &#123;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">cursor</span>: default;</span><br><span class="line">&#125;</span><br><span class="line">::v-deep .v-step__content &#123;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">40px</span>;</span><br><span class="line">&#125;</span><br><span class="line">::v-deep .line:after &#123;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">z-index</span>: -<span class="number">1</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">60%</span>;</span><br><span class="line">  <span class="attribute">left</span>: -<span class="number">0.35em</span>;</span><br><span class="line">  <span class="attribute">right</span>: -<span class="number">0.35em</span>;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">transition</span>: top <span class="number">200ms</span> <span class="built_in">cubic-bezier</span>(<span class="number">0</span>, <span class="number">0.8</span>, <span class="number">0.13</span>, <span class="number">1</span>);</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#feecb2</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br><span class="line">::v-deep .textCenter &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#666666</span>;</span><br><span class="line">  <span class="attribute">margin-top</span>: <span class="number">23px</span>;</span><br><span class="line">  <span class="attribute">cursor</span>: default;</span><br><span class="line">&#125;</span><br><span class="line">::v-deep .v-step &#123;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#ffffff</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#000000</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line">  <span class="attribute">max-width</span>: none;</span><br><span class="line">&#125;</span><br><span class="line">::v-deep .v-step__button &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#fbc000</span>;</span><br><span class="line">  <span class="attribute">font-weight</span>: <span class="number">400</span>;</span><br><span class="line">  <span class="attribute">margin-bottom</span>: <span class="number">18px</span>;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">12px</span>;</span><br><span class="line">  <span class="attribute">border-bottom</span>: <span class="number">2px</span> solid <span class="number">#fbc000</span>;</span><br><span class="line">&#125;</span><br><span class="line">::v-deep .v-step__button_first &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#999</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">  <span class="attribute">border-bottom</span>: <span class="number">0px</span> solid <span class="number">#fbc000</span>;</span><br><span class="line">&#125;</span><br><span class="line">::v-deep .v-step__button:hover &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#fbc000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/** 阴影样式 **/</span></span><br><span class="line"><span class="selector-class">.v-tour__target--highlighted</span> &#123;</span><br><span class="line">  <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">99999px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.6</span>);</span><br><span class="line">&#125;<span class="selector-class">.leftTour</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: fixed;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">13.11%</span>;</span><br><span class="line">  <span class="attribute">min-width</span>: <span class="number">180px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">600px</span>;</span><br><span class="line">  <span class="attribute">background</span>: transparent;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">100</span>;</span><br><span class="line">  <span class="attribute">pointer-events</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/** 需要引导的盒子样式 **/</span></span><br><span class="line"><span class="selector-class">.rightTour</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: fixed;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">13.11%</span>;</span><br><span class="line">  <span class="attribute">min-width</span>: <span class="number">180px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">190px</span>;</span><br><span class="line">  <span class="attribute">background</span>: transparent;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">100</span>;</span><br><span class="line">  <span class="attribute">pointer-events</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>第四步 按照说明手册去写js 实现绑定引导绑定</p>
</blockquote>
<ul>
<li>这个组件的js写法十分的有意思 用惯了<code>elementUI</code>的人绑定一些回调事件的时候肯定喜欢直接<code>@....</code>这种方式去写 但这个组件是<a target="_blank" rel="noopener" href="https://github.com/pulsardev/vue-tour/wiki/Callbacks">这样</a>设计回调函数的 你需要在组件上绑定<code>:callbacks=&quot;myCallbacks&quot;</code>然后再<code>data()</code>中绑定你需要使用的方法</li>
<li>这个是他的回调方法的名称</li>
</ul>
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody><tr>
<td>onStart</td>
<td>开始回调</td>
</tr>
<tr>
<td>onPreviousStep</td>
<td>上一步回调</td>
</tr>
<tr>
<td>onNextStep</td>
<td>下一步回调</td>
</tr>
<tr>
<td>onSkip</td>
<td>跳过回调</td>
</tr>
<tr>
<td>onFinish</td>
<td>结束回调</td>
</tr>
<tr>
<td>onStop</td>
<td>停止回调</td>
</tr>
</tbody></table>
<ul>
<li>首先你想使用回调的各种方法 需要在<code>v-tour</code>组件上绑定<code>:callbacks=&quot;myCallbacks&quot;</code></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;v-tour name=&quot;myTour&quot; :steps=&quot;steps&quot; :options=&quot;myOptions&quot; :callbacks=&quot;myCallbacks&quot;&gt;&lt;/v-tour&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>然后需要在<code>data()</code>中设置 <code>:callbacks</code>设置的名称 和你在<code>methods</code>中的方法名 并且设置设置引导内容</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line">data () &#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">        <span class="attr">myOptions</span>: &#123;</span><br><span class="line">      <span class="comment">// 是否启动键盘操控</span></span><br><span class="line">      <span class="attr">useKeyboardNavigation</span>: <span class="literal">true</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 引导样式和语数</span></span><br><span class="line">    <span class="attr">steps</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="comment">// 绑定你设置的步骤名</span></span><br><span class="line">        <span class="attr">target</span>: <span class="string">&#x27;#v-step-0&#x27;</span>,</span><br><span class="line">        <span class="comment">// 这里是导航提示的内容 支持div元素可以设置class</span></span><br><span class="line">        <span class="attr">content</span>: <span class="string">`&lt;div class=&quot;demoss&quot;&gt; &lt;span class=&quot;line&quot;&gt;导航服务栏&lt;/span&gt; &lt;br&gt; &lt;div class=&quot;textCenter&quot;&gt;导航服务移动到这里啦，鼠标悬浮就可以查看哦~&lt;/div&gt;&lt;/div&gt;`</span>,</span><br><span class="line">        <span class="attr">params</span>: &#123;</span><br><span class="line">          <span class="comment">// 这里是设置在哪个位置显示 top right ......</span></span><br><span class="line">          <span class="attr">placement</span>: <span class="string">&#x27;right&#x27;</span>,</span><br><span class="line">          <span class="comment">// 是否启动阴影指导(如果你不设置阴影class 它实际上只有一个框框)</span></span><br><span class="line">          <span class="attr">highlight</span>: <span class="literal">true</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">target</span>: <span class="string">&#x27;#v-step-1&#x27;</span>,</span><br><span class="line">        <span class="attr">content</span>: <span class="string">`&lt;div class=&quot;demoss&quot;&gt; &lt;span class=&quot;line&quot;&gt;登录账号&lt;/span&gt; &lt;br&gt; &lt;div class=&quot;textCenter&quot;&gt;登录账户在这里，点击此处登录或切换账号哦~&lt;/div&gt;&lt;/div&gt;`</span>,</span><br><span class="line">        <span class="attr">params</span>: &#123;</span><br><span class="line">          <span class="attr">placement</span>: <span class="string">&#x27;right&#x27;</span>,</span><br><span class="line">          <span class="attr">highlight</span>: <span class="literal">true</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">target</span>: <span class="string">&#x27;#v-step-2&#x27;</span>,</span><br><span class="line">        <span class="attr">content</span>: <span class="string">`&lt;div class=&quot;demoss&quot;&gt; &lt;span class=&quot;line&quot;&gt;任务申请待办&lt;/span&gt; &lt;br&gt; &lt;div class=&quot;textCenter&quot;&gt;我的任务待办和我的申请都在这里咯~快来点击体验吧！&lt;/div&gt;&lt;/div&gt;`</span>,</span><br><span class="line">        <span class="attr">params</span>: &#123;</span><br><span class="line">          <span class="attr">placement</span>: <span class="string">&#x27;top&#x27;</span>,</span><br><span class="line">          <span class="attr">highlight</span>: <span class="literal">true</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">target</span>: <span class="string">&#x27;#v-step-3&#x27;</span>,</span><br><span class="line">        <span class="attr">content</span>: <span class="string">`&lt;div class=&quot;demoss&quot;&gt; &lt;span class=&quot;line&quot;&gt;系统快捷入口&lt;/span&gt; &lt;br&gt; &lt;div class=&quot;textCenter&quot;&gt;公司动态显示为最新消息，点击右侧可以查看公司所有动态哦~&lt;/div&gt;&lt;/div&gt;`</span>,</span><br><span class="line">        <span class="attr">params</span>: &#123;</span><br><span class="line">          <span class="attr">placement</span>: <span class="string">&#x27;top&#x27;</span>,</span><br><span class="line">          <span class="attr">highlight</span>: <span class="literal">true</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">target</span>: <span class="string">&#x27;#v-step-4&#x27;</span>,</span><br><span class="line">        <span class="attr">content</span>: <span class="string">`&lt;div class=&quot;demoss&quot;&gt; &lt;span class=&quot;line&quot;&gt;最新公司动态&lt;/span&gt; &lt;br&gt; &lt;div class=&quot;textCenter&quot;&gt;系统服务快捷入口都转移到这里啦~快来体验一下吧！&lt;/div&gt;&lt;/div&gt;`</span>,</span><br><span class="line">        <span class="attr">params</span>: &#123;</span><br><span class="line">          <span class="attr">placement</span>: <span class="string">&#x27;top&#x27;</span>,</span><br><span class="line">          <span class="attr">highlight</span>: <span class="literal">true</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">    ],</span><br><span class="line">    <span class="comment">// 引导回调的方法 格式:</span></span><br><span class="line">    <span class="comment">// 组件指定的回调方法: 你在methods中设置的方法</span></span><br><span class="line">    <span class="attr">myCallbacks</span>: &#123;</span><br><span class="line">      <span class="attr">onStart</span>: <span class="variable language_">this</span>.<span class="property">isReady</span>,</span><br><span class="line">      <span class="attr">onSkip</span>: <span class="variable language_">this</span>.<span class="property">isOver</span>,</span><br><span class="line">      <span class="attr">onFinish</span>: <span class="variable language_">this</span>.<span class="property">isOver</span></span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>然后你就可以愉快的在<code>methods</code>中写你设置的方法 </li>
<li><font color =#ff3040>注意: 引导他不会自动开启 你自己设置启动(可以在<code>mounted()</code>中设置一个方法哦</font></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 启动引导的代码</span></span><br><span class="line">   <span class="variable language_">this</span>.<span class="property">$tours</span>[<span class="string">&#x27;myTour&#x27;</span>].<span class="title function_">start</span>()</span><br></pre></td></tr></table></figure>

<h2 id="组件使用"><a href="#组件使用" class="headerlink" title="组件使用"></a>组件使用</h2><ul>
<li>如果我要在拆分的组件中使用引导怎么办</li>
<li>需要在<code>params</code>中设置<code>highlight: true</code> 组件穿透</li>
<li><font color =#ff3040>注意: 如果你给组件也要使用引导阴影 当前页面 <code>&lt;style&gt;</code> 不要加<code>scope</code> 因为添加后只是当前页面唯一的class类(防止污染) 建议直接在<code>&lt;style&gt;</code>中设置即可 不要在<code>scope</code> 中去写</font></li>
</ul>
<blockquote>
<p>当前调用组件的页面 设置组件穿透</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 设置引导配置</span></span><br><span class="line">&#123;</span><br><span class="line">          <span class="attr">target</span>: <span class="string">&#x27;#v-step-3&#x27;</span>,</span><br><span class="line">          <span class="attr">content</span>: <span class="string">`&lt;div class=&quot;demoss&quot;&gt; &lt;span class=&quot;line&quot;&gt;最新公司动态&lt;/span&gt; &lt;br&gt; &lt;div class=&quot;textCenter&quot;&gt;系统服务快捷入口都转移到这里啦~快来体验一下吧！&lt;/div&gt;&lt;/div&gt;`</span>,</span><br><span class="line">          <span class="attr">params</span>: &#123;</span><br><span class="line">            <span class="attr">placement</span>: <span class="string">&#x27;top&#x27;</span>,</span><br><span class="line">            <span class="comment">// 设置组件穿透</span></span><br><span class="line">            <span class="attr">highlight</span>: <span class="literal">true</span></span><br><span class="line">       &#125;</span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">// 建议当前页的&lt;style&gt;不要加scope唯一class类 会导致组件引导没有阴影</span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    <span class="selector-class">.v-tour__target--highlighted</span> &#123;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">      <span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">0</span> <span class="number">99999px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.6</span>);</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">     &#125;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>在组件中设置选中的类名</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;gonggaocontion_box&quot; id=&quot;v-step-3&quot; /&gt;</span><br></pre></td></tr></table></figure>

<h2 id="最后补充"><a href="#最后补充" class="headerlink" title="最后补充"></a>最后补充</h2><ul>
<li>如果你的产品或ui是一个好说话不严格的人 你可以使用组件自带的默认按钮显示 比如说保留结束引导这个按钮 这样就可以不用通过插槽自定义按钮内容了 只需要统一改按钮名称即可 你可以到<a target="_blank" rel="noopener" href="https://github.com/pulsardev/vue-tour/wiki/Tour-Configuration">这里看看</a>如何改按钮名称( 默认按钮名是英文 ) </li>
<li>我介绍的是自定义插槽的效果 默认他的按钮是自带结束引导的按钮( 我们项目不让带 ) 所以用到了这个组件的插槽功能 实现一个定制按钮的展示</li>
</ul>

        </div>
        
            <div class="kratos-copyright text-center clearfix">
                <h5>本作品采用 <a rel="license nofollow" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
            </div>
        
        <footer class="kratos-entry-footer clearfix">
            
                <div class="post-like-donate text-center clearfix" id="post-like-donate">
                
                
                    <a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
                    <div class="share-wrap" style="display: none;">
    <div class="share-group">
        <a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-qq"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-star"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weixin"></i>
            </div>
            <div class="share-int">
                <div class="qrcode" id="wechat-qr"></div>
                <p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weibo"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-facebook"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-twitter"></i>
            </div>
        </a>
    </div>
    <script type="text/javascript">
        $(()=>{
            new QRCode("wechat-qr", {
                text: "https://cuishikang.gitee.io/2022/01/20/Vue/1.2_Vue_Tour/",
                width: 150,
                height: 150,
                correctLevel : QRCode.CorrectLevel.H
            });
        });
        function share(dest) {
            const qqBase        = "https://connect.qq.com/widget/shareqq/index.html?";
            const weiboBase     = "https://service.weibo.com/share/share.php?";
            const qzoneBase     = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
            const facebookBase  = "https://www.facebook.com/sharer/sharer.php?";
            const twitterBase   = "https://twitter.com/intent/tweet?";
            const hostUrl       = "https://cuishikang.gitee.io/2022/01/20/Vue/1.2_Vue_Tour/";
            const title         = "「Vue2 tour的使用记录」";
            const excerpt       = `::: tip 介绍记录Vue tour引导页组件的使用方法:::`;
            let _URL;
            switch (dest) {
                case "qq"       : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";     break;
                case "weibo"    : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt;                                 break;
                case "qzone"    : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";  break;
                case "facebook" : _URL = facebookBase+"u="+hostUrl;                                                        break;
                case "twitter"  : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl;                                break;
            }
            window.open(_URL);
        };
    </script>
</div>
                
                </div>
            
            <div class="footer-tag clearfix">
                <div class="pull-left">
                <i class="fa fa-tags"></i>
                    <a class="tag-none-link" href="/tags/Vue/" rel="tag">Vue</a>
                </div>
                <div class="pull-date">
                <span>最后编辑：2022-02-19</span>
                </div>
            </div>
        </footer>
    </div>
    
        <nav class="navigation post-navigation clearfix" role="navigation">
            
            <div class="nav-previous clearfix">
                <a title=" 鼠标经过后背景填充的小特效" href="/2022/01/20/animation/1.3_Vue_line/">&lt; 上一篇</a>
            </div>
            
            
            <div class="nav-next clearfix">
                <a title=" 记录background背景图的特性" href="/2022/01/21/animation/1.4_background_user/">下一篇 &gt;</a>
            </div>
            
        </nav>
    
    
</article>

        

            </section>

        

                
            

<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
    <!-- 文章和页面根据splitter来分割，没有的话就从头开始设置为sticky -->
    
    
                <aside id="krw-about" class="widget widget-kratos-about clearfix">
    <div class="photo-background"></div>
    <div class="photo-wrapper clearfix">
        <div class="photo-wrapper-tip text-center">
            <img class="about-photo" src="https://gitee.com/cuishikang/tmp/raw/master/img/20220220194141.png" />
        </div>
    </div>
    <div class="textwidget">
        <p class="text-center"></p>
    </div>
    <div class="site-meta">
        <a class="meta-item" href="/archives/">
            <span class="title">
                文章
            </span>
            <span class="count">
                91
            </span>
        </a>
        <a class="meta-item" href="/categories/">
            <span class="title">
                分类
            </span>
            <span class="count">
                13
            </span>
        </a>
        <a class="meta-item" href="/tags/">
            <span class="title">
                标签
            </span>
            <span class="count">
                33
            </span>
        </a>
    </div>
</aside>
            
                    <div class="sticky-area">
                
                
  <aside id="krw-categories" class="widget widget-kratos-categories clearfix">
    <h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Css/">Css</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/RABC/">RABC</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vscode/">Vscode</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a><span class="category-list-count">13</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/">Vue3</a><span class="category-list-count">25</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue%E7%A7%BB%E5%8A%A8%E5%A4%B4%E6%9D%A1%E9%A1%B9%E7%9B%AE/">Vue移动头条项目</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/animation/">animation</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/axios/">axios</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/other/">other</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/uniapp/">uniapp</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue-element-admin/">vue-element-admin</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/">小程序</a><span class="category-list-count">2</span></li></ul>
  </aside>


            
                
  <aside id="krw-tags" class="widget widget-kratos-tags clearfix">
    <h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
      <div class="tag-clouds">
        <a href="/tags/Css/" style="font-size: 0.66em;">Css</a> <a href="/tags/H5Video/" style="font-size: 0.6em;">H5Video</a> <a href="/tags/JavaScript/" style="font-size: 0.74em;">JavaScript</a> <a href="/tags/My-project/" style="font-size: 0.6em;">My project</a> <a href="/tags/QQ/" style="font-size: 0.6em;">QQ</a> <a href="/tags/RABC/" style="font-size: 0.6em;">RABC</a> <a href="/tags/Vant/" style="font-size: 0.71em;">Vant</a> <a href="/tags/VeeValidate/" style="font-size: 0.6em;">VeeValidate</a> <a href="/tags/Vscode/" style="font-size: 0.6em;">Vscode</a> <a href="/tags/Vue/" style="font-size: 0.8em;">Vue</a> <a href="/tags/Vue-Router/" style="font-size: 0.6em;">Vue Router</a> <a href="/tags/Vue3/" style="font-size: 0.77em;">Vue3</a> <a href="/tags/Vuex/" style="font-size: 0.6em;">Vuex</a> <a href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 0.74em;">Vue移动端</a> <a href="/tags/Windows/" style="font-size: 0.6em;">Windows</a> <a href="/tags/animation/" style="font-size: 0.63em;">animation</a> <a href="/tags/axios/" style="font-size: 0.69em;">axios</a> <a href="/tags/echarts/" style="font-size: 0.6em;">echarts</a>
      </div>
  </aside>

            
                
  <aside id="krw-posts" class="widget widget-kratos-posts">
  <h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
  <div class="tab-content">
      <ul class="list-group">
        
        
          
          
            <a class="list-group-item" href="/2111/02/19/JavaScript/5_algorithm_tree/"><i class="fa  fa-book"></i> JavaScript树形数据转换算法</a>
            
          
        
          
          
            <a class="list-group-item" href="/2099/01/27/Vue3/1.1.1_Vue_study/"><i class="fa  fa-book"></i> Vue3 学习手册(博客版)</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/28/JavaScript/0.2_scroll/"><i class="fa  fa-book"></i> JS 滚动到指定位置和回到顶部</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/23/Vue/5_Vue_nextTick/"><i class="fa  fa-book"></i> 理解$nextTick</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/20/hello-world/"><i class="fa  fa-book"></i> Hello World</a>
            
          
        
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
      </ul>
  </div>
  </aside>

            
    </div>
</section>
        
        </div>
    </div>
</div>
<footer>
    <div id="footer"  class="ap-lrc"  >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 footer-list text-center">
                    <ul class="kratos-social-icons">
                        
                        
                        <li><a target="_blank" rel="nofollow" href="https://t.me/CandyUnion"><i class="fa fa-telegram"></i></a></li>
                        
                        
                        
                        <li><a target="_blank" rel="me" href="https://nya.one/@Candinya"><i class="fa fa fa-share-alt-square"></i></a></li>
                        <li><a target="_blank" rel="nofollow" href="https://github.com/Candinya"><i class="fa fa-github"></i></a></li>
                        
                    </ul>
                    <ul class="kratos-copyright">
                        <div>
                            <li>&copy; 2022 小崔的博客 版权所有.</li>
                            <li>本站已运行<span id="span_dt">Loading...</span></li>
                        </div>
                        <div>
                            <li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
                            <li>Site built with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by cuishikang.</li>
                        </div>
                        <div>
                            <li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
                            <li>Hosted on <a href="https://github.io" target="_blank">Github Pages</a></li>
                        </div>
                        <div>
                            
                            
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="kr-tool text-center">
            <div class="tool">
                
                    <div class="box search-box">
                        <a href="/search/">
                            <span class="fa fa-search"></span>
                        </a>
                    </div>
                
                
                    <div class="box theme-box" id="darkmode-switch">
                        <span class="fa fa-adjust"></span>
                    </div>
                
                
            </div>
            <div class="box gotop-box">
                <span class="fa fa-chevron-up"></span>
            </div>
        </div>
    </div>
</footer>
</div>
</div>

        <script defer src="https://unpkg.com/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script>
    if (!window.kr) {
        window.kr = {};
    }
    window.kr.notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));
    window.kr.siteRoot = "/";
</script>


    <script async src="/js/candy.min.js"></script>



    <script defer src="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
    
    <script defer src="https://unpkg.com/meting@2/dist/Meting.min.js"></script>
    <meting-js
        server="netease"
        type="song"
        id="1375305989"
        order="random"
        fixed="true"
    >
    </meting-js>



    <script defer src="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script defer src="https://unpkg.com/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script defer src="/js/kratosr.min.js"></script>
<script defer src="/js/pjax.min.js"></script>


    <script defer src="/js/kr-dark.min.js"></script>



<!-- Extra support for third-party plguins  -->


    </body>
</html>